<template>
    <div class="student-info">
        <div class="header">
            <div class="head">
                <home-banner home></home-banner>
            </div>
            <img class="avatar-icon" :src="student.headInfo.photoUrl" alt="照片" />
            <div class="box">
                <el-descriptions :column="4">
                    <el-descriptions-item :label="student.baseInfo.name">
                        <el-tag effect="dark" v-if="student.headInfo.dormWarning === true">在校</el-tag>
                        <el-tag effect="dark" v-else-if="student.headInfo.dormWarning === false" type="warning">
                            离校
                        </el-tag>
                        &nbsp;&nbsp;
                        <el-tag effect="dark" type="warning" v-if="student.headInfo.dormWarning">归寝预警</el-tag>
                        &nbsp;&nbsp;
                        <el-tag effect="dark" type="warning" v-if="student.headInfo.studyWarning">学业预警</el-tag>
                    </el-descriptions-item>
                </el-descriptions>

                <el-descriptions :column="4">
                    <el-descriptions-item label="学院:">{{ student.schoolInfo.school }}</el-descriptions-item>
                    <el-descriptions-item label="班级:">
                        {{ student.schoolInfo.major }}{{ student.schoolInfo.cls }}
                    </el-descriptions-item>
                    <el-descriptions-item label="学号:">{{ id }}</el-descriptions-item>
                    <el-descriptions-item label="电话:">{{ student.baseInfo.phone }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions>
                    <el-descriptions-item label="学籍状态:">
                        <el-tag effect="dark" type="danger" v-if="student.headInfo.archiveStatus === '退学'">
                            退学
                        </el-tag>
                        <el-tag effect="dark" v-else-if="student.headInfo.archiveStatus === '正常'">正常</el-tag>
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions :column="2">
                    <el-descriptions-item label="辅导员:">{{ student.headInfo.mentor }}</el-descriptions-item>
                    <el-descriptions-item label="班主任:">{{ student.headInfo.teacher }}</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>

        <div>
            <el-tabs stretch type="border-card" v-model="activeTab">
                <el-tab-pane label="个人信息" name="personalInfo">
                    <keep-alive>
                        <personal-info
                            :is="isActiveTab('personalInfo')"
                            :key="'personalInfo'"
                            :student="student"
                            lazy
                        ></personal-info>
                    </keep-alive>
                </el-tab-pane>
                <el-tab-pane label="学习科研" name="studyResearch">
                    <keep-alive>
                        <study-research
                            :is="isActiveTab('studyResearch')"
                            :key="'studyResearch'"
                            :study="study"
                            lazy
                        ></study-research>
                    </keep-alive>
                </el-tab-pane>
                <el-tab-pane label="奖惩助贷" name="studyRewards">
                    <keep-alive>
                        <study-rewards
                            :is="isActiveTab('studyRewards')"
                            :key="'studyRewards'"
                            :rewards="rewards"
                            lazy
                        ></study-rewards>
                    </keep-alive>
                </el-tab-pane>
                <el-tab-pane label="第二课堂" name="extraCurricular">
                    <keep-alive>
                        <extra-curricular
                            :is="isActiveTab('extraCurricular')"
                            :key="'extraCurricular'"
                            :extra="extra"
                            lazy
                        ></extra-curricular>
                    </keep-alive>
                </el-tab-pane>
                <el-tab-pane label="书院信息" name="collegeInfo">
                    <keep-alive>
                        <college-info
                            :is="isActiveTab('collegeInfo')"
                            :key="'collegeInfo'"
                            :college="college"
                            lazy
                        ></college-info>
                    </keep-alive>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import HomeBanner from '@/components/common/HomeBanner'
import PersonalInfo from '@/components/tabs/PersonalInfo.vue'
import StudyResearch from '@/components/tabs/StudyResearch.vue'
import StudyRewards from '@/components/tabs/StudyRewards.vue'
import ExtraCurricular from '@/components/tabs/ExtraCurricular.vue'
import CollegeInfo from '@/components/tabs/CollegeInfo.vue'

export default {
    components: {
        HomeBanner,
        PersonalInfo,
        StudyResearch,
        StudyRewards,
        ExtraCurricular,
        CollegeInfo,
    },
}
window.onunload = function () {
    document.documentElement.scrollTop = 0 //ie下
    document.body.scrollTop = 0 //非ie
}
</script>
<script setup>
import { ref, watch, defineProps, onMounted } from 'vue'
import api from '@/api/student'

const props = defineProps(['id'])
const activeTab = ref('personalInfo')
const student = ref({
    headInfo: {},
    baseInfo: {},
    schoolInfo: {},
    parentsInfo: {},
})
const study = ref({
    id: null,
})
const rewards = ref({
    id: null,
})
const college = ref({
    id: null,
})
const extra = ref({
    id: null,
})

const isActiveTab = (tabName) => {
    return activeTab.value === tabName
}

onMounted(async () => {
    try {
        const responses = await Promise.all([
            api.getHeadInfo(props.id),
            api.getBaseInfo(props.id),
            api.getStudentInfo(props.id),
            api.getParentsInfo(props.id),
        ])

        const [resHead, resBase, resSchool, resParents] = responses
        student.value = {
            ...student.value,
            headInfo: resHead.data,
            baseInfo: resBase.data,
            schoolInfo: resSchool.data,
            parentsInfo: resParents.data,
        }
    } catch (error) {
        console.error(error)
    }
})

const fetchPersonalInfo = async () => {
    try {
        const responses = await Promise.all([
            api.getHeadInfo(props.id),
            api.getBaseInfo(props.id),
            api.getStudentInfo(props.id),
            api.getParentsInfo(props.id),
        ])
        const [resHead, resBase, resSchool, resParents] = responses

        student.value = {
            ...student.value,
            headInfo: resHead.data,
            baseInfo: resBase.data,
            schoolInfo: resSchool.data,
            parentsInfo: resParents.data,
        }
    } catch (error) {
        console.error(error)
    }
}

watch(
    () => activeTab.value,
    async (newTab) => {
        activeTab.value = newTab
        switch (newTab) {
            case 'personalInfo':
                // await fetchPersonalInfo()
                break
            case 'studyResearch':
                study.value = {
                    id: props.id,
                }
                break
            case 'studyRewards':
                rewards.value = {
                    id: props.id,
                }
                break
            case 'extraCurricular':
                extra.value = { id: props.id }
                break
            case 'collegeInfo':
                college.value = { id: props.id }
                break
            default:
                break
        }
    }
)
</script>

<style lang="less">
.el-tabs--border-card > .el-tabs__content {
    padding: 0;
}
.el-tabs__item {
    color: #333 !important;
    transition: background-color 0.3s ease-in-out;
    background-color: mix(#f5f5f5, #0058ac, 85%);

    &:hover {
        color: mix(#333, #000, 20%);
        background-color: mix(#f5f5f5, #0058ac, 62%);
    }
    &.is-active {
        background-color: mix(#f5f5f5, #0058ac, 25%) !important;
        color: #fff !important;
    }
}

.el-tabs__content {
    transition: opacity 0.3s ease-in-out;
}

.el-tabs__item {
    transition: background-color 0.2s ease-in-out;
}

.box {
    width: 50%;
    position: absolute;
    top: 100px;
    left: 250px;
    background: rgba(255, 255, 255, 0); //背景透明，文字不会透明
    margin: 20px;

    .el-descriptions__body {
        padding-left: 20px;
        padding-top: 10px;
        background: rgba(255, 255, 255, 0);
        .el-descriptions__cell {
            line-height: 10px;
        }

        .el-descriptions__content {
            color: white;
        }
    }
}

.student-info {
    .header {
        background-image: url(@/assets/blue.png);
        width: 100%;
        height: 300px;
        //display: flex;
        align-items: flex-start;
        background-size: 100% 100%;

        .logo1 {
            float: right;
            margin-right: 30px;
            margin-top: 20px;
            width: 40px;
            height: 40px;
        }

        .avatar-icon {
            margin-left: 60px;
            margin-top: 40px;
            width: 140px;
            height: 140px;
            border-radius: 100px;
        }

        .info {
            .el-table {
                width: 100%;
                font-size: 14px;
            }

            .el-table th,
            .el-table td {
                padding: 10px;
            }
        }
    }
}
</style>
